<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
        <el-form-item label="案件编号" prop="ajbh">
          <el-input
            v-model="queryParams.ajbh"
            placeholder="请输入案件编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="被取保候审人(被行政拘留人)" prop="hsr">
          <el-input
            v-model="queryParams.hsr"
            placeholder="请输入被取保候审人(被行政拘留人)"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system/bzjtable/export']" >导出</el-button>
        </el-col>
        <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-edit" size="mini" :disabled="single" @click="doubleclick">划拨</el-button>
      </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange"  @current-change="tableCurrentChange" @row-dblclick="doubleclick">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="Key" align="center" prop="xh" />
        <el-table-column label="案件编号" align="center" prop="ajbh" />
        <el-table-column label="案件名称" align="center" prop="ajmc" />
        <el-table-column label="收取法律文书号" align="center" prop="sqwsh" />
        <el-table-column label="被取保候审人(被行政拘留人)" align="center" prop="hsr" />
        <el-table-column label="划拨法律文书号" align="center" prop="hbwsh" />
        <el-table-column label="划拨单位名称" align="center" prop="hbdw" />
        <el-table-column label="执行法院账户名称" align="center" prop="hb_dgyhzh" />
        <el-table-column label="执行法院开户行" align="center" prop="hb_khh" />
        <el-table-column label="执行法院账号" align="center" prop="hb_yhzh" />
        <el-table-column label="取保候审保证金" align="center" prop="sqje" />
        <el-table-column label="划拨金额" align="center" prop="hbje" />
        <el-table-column label="人员类别" align="center" prop="xjr" />
        <el-table-column label="性别" align="center" prop="xb" />
        <el-table-column label="出生日期" align="center" prop="csrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.csrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="住址" align="center" prop="zz" /> -->
        <el-table-column label="户籍地址" align="center" prop="hjdz" />
        <el-table-column label="单位及职务" align="center" prop="dwzw" />
        <el-table-column label="联系电话" align="center" prop="lxdh" />
        <el-table-column label="委托交款人代" align="center" prop="jkr" />
        <el-table-column label="收银行编号" align="center" prop="dsyhbh" />
        <el-table-column label="缴款时间" align="center" prop="jnsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.jnsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交纳银行卡号" align="center" prop="jnkh" />
        <el-table-column label="批准人" align="center" prop="pzr" />
        <el-table-column label="取保候审批准时间" align="center" prop="pzsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.pzsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办案人" align="center" prop="bar" />
        <el-table-column label="办案人所在单位编号" align="center" prop="dwbh" />
        <el-table-column label="办案单位" align="center" prop="badw" />
        <el-table-column label="收取日期" align="center" prop="sqrq" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqrq, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="填报时间" align="center" prop="sqtfsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sqtfsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据状态" align="center" prop="djzt" />
        <el-table-column label="单据时间" align="center" prop="djsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.djsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="划拨操作员" align="center" prop="hbczy" />
        <el-table-column label="提交日期" align="center" prop="hbsj" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.hbsj, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="划拨单位联系人电话" align="center" prop="hblxdh" />
      </el-table>
      

      <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 双击弹窗 -->
        <el-dialog :title="tit" :visible.sync="open" width="45%" @closed="gb">
          <el-form ref="forms" :inline="true" :model="form" :rules="ruless" :hide-required-asterisk="true" label-width="120px" class="">
        <el-form-item label="案件编号">
          <el-input v-model="form.ajbh" placeholder="请输入案件编号"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="案件名称">
          <el-input v-model="form.ajmc" placeholder="请输入案件名称"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="被取保候审人(被行政拘留人)">
          <el-input v-model="form.hsr" placeholder="请输入被取保候审人(被行政拘留人)"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="人员类别">
          <el-input v-model="form.xjr" placeholder="请输入人员类别"  :disabled="true"/>
        </el-form-item>
        <!-- <el-form-item label="移送单位">
          <el-input v-model="form.badw" placeholder="请输入移送单位"  :disabled="true"/>
        </el-form-item>

        <el-form-item label="被移送单位" prop="hbdw">
          <el-input v-model="form.hbdw" placeholder="请输入被移送单位" />
        </el-form-item> -->
        <el-form-item label="执行法院名称" prop="pjfy">
          <el-input v-model="form.pjfy" placeholder="请输入执行法院名称" />
        </el-form-item>

        <el-form-item label="法院协助执行通知书文号" prop="hbwsh">
          <el-input v-model="form.hbwsh" placeholder="请输入法院协助执行通知书文号" />
        </el-form-item>
        <!-- <el-form-item label="移交原因" prop="HBYJ">
          <el-input v-model="form.HBYJ" placeholder="请输入移交原因" />
        </el-form-item> -->

        <el-form-item label="执行法院账户名称" prop="hb_dgyhzh">
          <el-input v-model="form.hb_dgyhzh" placeholder="请输入执行法院账户名称" />
        </el-form-item>
        <el-form-item label="执行法院开户行" prop="hb_khh">
          <el-input v-model="form.hb_khh" placeholder="请输入执行法院开户行" />
        </el-form-item>
        <el-form-item label="执行法院账号" prop="hb_yhzh">
          <el-input v-model="form.hb_yhzh" placeholder="请输入执行法院账号" />
        </el-form-item>
        <el-form-item label="收取金额" prop="sqje">
          <el-input v-model="form.sqje" placeholder=""  :disabled="true"/>
        </el-form-item>
        <el-form-item label="没收金额" prop="msje">
          <el-input v-model="form.msje" placeholder=""  :disabled="true"/>
        </el-form-item>
        <el-form-item label="退还金额" prop="thje">
          <el-input v-model="form.thje" placeholder=""  :disabled="true"/>
        </el-form-item>
        <el-form-item label="剩余金额" >
          <el-input v-model="form.hbje"  :disabled="true" />
        </el-form-item>
        <el-form-item label="执行金额" prop="hbje">
          <el-input v-model="form.hbje" placeholder="请输入执行金额"  />
        </el-form-item>
        <el-form-item label="提交日期" prop="hbsj">
          <el-date-picker clearable v-model="form.hbsj" type="datetime" value-format="yyyy-MM-dd HH:dd:ss"
            placeholder="请选择提交日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="办案人" prop="hbczy">
          <el-input v-model="form.hbczy" placeholder="请输入办案人" />
        </el-form-item>
        <el-form-item label="办案人联系方式" prop="hblxdh">
          <el-input v-model="form.hblxdh" placeholder="请输入办案人员联系方式" />
        </el-form-item>


        <el-form-item label="附件选择" prop="files">
          <Upload v-model="form.files" :data="{}" acceptTip="*仅图片、PDF类型文件可在线预览"
            multiple></Upload>
        </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(form)">划拨</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
  import { Transfer, getTransfer, delTransfer, addTransfer, updateTransfer } from "@/api/system/bzjtable";
  import selectMultiple from '@/views/collect/addSecurity/selectMultiple'
  import Print from '@/utils/print.js'
  import Upload from '@/views/transfer/Upload'
  export default {
    name: "Transfertable",
    data() {
        let amount = (rule, value, callback) => {
      if (value) {
        if (!/^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/.test(value)) return callback(new Error('请输入非负数、最多含两位小数'))
        // if (value <= 0) return callback(new Error('划拨金额应大于0'))
        if (value > 999999999999.99) return callback(new Error('执行金额不能超过999999999999.99'))
      }
     else {
        return callback(new Error('请输入执行金额'))
      }
      callback()
    }
    let dialogVisible = (rule, val, callback) => {
      if (!val) callback(new Error('请输入手机号'))
      let exp = new RegExp(/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/)
      if (!exp.test(val)) {
        return callback(new Error('手机号格式不对'))
      }
      return callback()
    }
    let dialogVisibleFile = (rule, value, callback) => {
      console.log(value?.length, ';');
      if (rule.required) {
        if (value?.length) {
          callback()
        } else {
          return callback(new Error('请选择文件'))
        }
      }
      callback()
    }
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // transfer表格数据
        transferList: [],
        clickedRowData: null,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ajbh: null,
          ajmc: null,
          sqwsh: null,
          hsr: null,
          xjr: null,
          xb: null,
          csrq: null,
          zz: null,
          hjdz: null,
          dwzw: null,
          lxdh: null,
          sfzh: null,
          ajxz: null,
          sqje: null,
          sqfs: null,
          sqzt: 1,
          hbzt:0,
          hbshzt:0,
          jkr: null,
          jkrsfz: null,
          dsyhbh: null,
          jnsj: null,
          jnkh: null,
          pzr: null,
          pzsj: null,
          bar: null,
          dwbh: null,
          badw: null,
          sqrq: null,
          sqtfsj: null,
          sqtfr: null,
          msje: null,
          mszt: null,
          msyy: null,
          mswsh: null,
          mspzr: null,
          mspzsj: null,
          mstfr: null,
          msrq: null,
          mstfsj: null,
          msshzt: null,
          mskhzt: null,
          mskhsj: null,
          mskhczr: null,
          thje: null,
          thfs: null,
          thzt: null,
          thrq: null,
          thwsh: null,
          thpzr: null,
          thtfsj: null,
          thshzt: null,
          thshr: null,
          thshsj: null,
          thxm: null,
          thzh: null,
          thkhh: null,
          djzt: null,
          sqdyzt: null,
          djsj: null,
          sqkpzt: null,
          thkpzt: null,
          hbwsh: null,
          hbdw: null,
          hbje: null,
          hbry: null,
          hblxdh: null,
          hbsj: null,
          hbczy: null,
          thtfr: null,
          HBYJ : null,
        },
        // 表单参数
        form: {
        xh : null,
        ajbh : null,  
        ajmc : null,
        hsr : null,
        xjr : null,
        hbje :null,
        hbsj : null,
        hbwsh : null,
        HBYJ : null,
        hbczy : null,
        hblxdh : null,
        badw : null,
        hbdw : null,
        pjfy : null,
        hb_dgyhzh : null,
        },
        currentIndex: '',
        // 表单校验
        ruless: {
        hbdw: [{ required: true, trigger: 'change',message: '请输入被移送单位' }],
        pjfy: [{ required: true, trigger: 'change',message: '请输入执行法院名称' }],
        hbwsh: [{ required: true, trigger: 'change',message: '请输入法院协助执行通知书文号' }],
        HBYJ: [{ required: true, trigger: 'change',message: '请输入移交原因' }],
        hb_dgyhzh: [{ required: true, trigger: 'change',message: '请输入执行法院账户名称' }],
        hb_yhzh: [{ required: true, trigger: 'change',message: '请输入执行法院账号' }],
        hb_khh: [{ required: true, trigger: 'change',message: '请输入执行法院开户行' }],
        hbsj: [{ required: true, trigger: 'change',message: '请选择提交日期' }],
        hbczy: [{ required: true, trigger: 'change',message: '请输入办案人' }],

        hbje: [{ required: true, validator: amount, trigger: 'change' }],
        hblxdh: [{ required: true, validator: dialogVisible, trigger: 'change' }],
        files: [{ required: true, validator: dialogVisibleFile, trigger: 'change' }]
        }
      };
    },
    components: {
    selectMultiple,
    Upload
  },
    created() {
      this.getList();
    },
    methods: {
      /** 查询transfer列表 */
      getList() {
        this.loading = true;
        Transfer(this.queryParams).then(response => {
          this.transferList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
       },
       tableCurrentChange(row) {
      this.form = row
      this.currentIndex = row?.pIndex
    },
        /**双击操作 */
        doubleclick(row){
        this.form = row;
        this.tit = "划拨";
        this.open = true;
        },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      gb() {
      this.getList();
    },
      // 表单重置
      reset() {
        this.form = {
          xh: null,
          ajbh: null,
          ajmc: null,
          sqwsh: null,
          hsr: null,
          xjr: null,
          xb: null,
          csrq: null,
          zz: null,
          hjdz: null,
          dwzw: null,
          lxdh: null,
          sfzh: null,
          ajxz: null,
          sqje: null,
          sqfs: null,
          sqzt: 1,
          hbzt:0,
          jkr: null,
          jkrsfz: null,
          dsyhbh: null,
          jnsj: null,
          jnkh: null,
          pzr: null,
          pzsj: null,
          bar: null,
          dwbh: null,
          badw: null,
          sqrq: null,
          sqtfsj: null,
          sqtfr: null,
          msje: null,
          mszt: null,
          msyy: null,
          mswsh: null,
          mspzr: null,
          mspzsj: null,
          mstfr: null,
          msrq: null,
          mstfsj: null,
          msshzt: null,
          mskhzt: null,
          mskhsj: null,
          mskhczr: null,
          thje: null,
          thfs: null,
          thzt: null,
          thrq: null,
          thwsh: null,
          thpzr: null,
          thtfsj: null,
          thshzt: null,
          thshr: null,
          thshsj: null,
          thxm: null,
          thzh: null,
          thkhh: null,
          djzt: null,
          sqdyzt: null,
          djsj: null,
          sqkpzt: null,
          thkpzt: null,
          hbwsh: null,
          hbdw: null,
          hbje: null,
          hbry: null,
          hbsj: null,
          hblxdh: null,
          hbczy: null,
          thtfr: null
        };
        this.resetForm("form");
        this.ids = []; 
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // // 多选框选中数据
      handleSelectionChange(selection) {
        if (selection.length > 0) {  
          // 假设我们只关心第一行数据  
          const selectedRow = selection[0];  
            
          // 填充 form 对象中对应的字段  
          this.form.xh = selectedRow.xh;  
          this.form.ajbh = selectedRow.ajbh;  
          this.form.ajmc = selectedRow.ajmc;  
          this.form.hsr = selectedRow.hsr;  
          this.form.xjr = selectedRow.xjr; 
          this.form.hbdw = selectedRow.hbdw;  
          this.form.badw = selectedRow.badw;  
          this.form.hbwsh = selectedRow.hbwsh;  
          this.form.HBYJ = selectedRow.HBYJ;  
          this.form.hbje = selectedRow.hbje;  
          this.form.hbsj = selectedRow.hbsj;  
          this.form.hbczy = selectedRow.hbczy;  
          this.form.hblxdh = selectedRow.hblxdh;
          // 打开对话框  
          // this.open = true;  
          // debugger
          this.ids = selection.map(item => item.xh)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        } else {  
          // 如果没有选中任何行清空form对象
          this.reset(); // 假设你有一个方法来重置 form 对象  
        }  
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },

      /** 提交按钮 */
      submitForm() {
        debugger
        this.$refs.forms.validate(valid => {
          if (valid) {

              updateTransfer(this.form).then(response => {
                this.$modal.msgSuccess("划拨成功");
                this.open = false;
                this.getList();
              });
            
          } else {
                // 表单验证失败，给出提示信息  
                this.$message.error('移交失败，请上传附件！');  
                return false;  
            }
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/bzjtable/export', {
          ...this.queryParams
        }, `transfer_${new Date().getTime()}.xlsx`)
      }
    }
  };
  </script>
  